<template>
  <div>
    <el-button @click="dialogVisible = true">测试</el-button>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="90%"
      :before-close="handleClose"
    >
      <basicSituation
        :formList="formList"
        formTitle="合同信息"
        :form="form"
        :formRef="formRef"
        :url="this.url"
        :document="document"
      >
        <template #dynamic-fields-合同名称>
          <el-form
            :model="form"
            ref="dynamicValidateForm"
            class="demo-dynamic"
            label-position="left"
          >
            <el-form-item
              prop="email"
              label="签约方"
              :rules="[
                { required: true, message: '请输入邮箱地址', trigger: 'blur' },
              ]"
            >
              <el-form-item
                v-for="(domain, index) in formList"
                :label="'甲' + index"
                style="display: flex; align-items: center"
              >
                <div style="display: flex; margin-left: 5%">
                  <el-input v-model="domain.value"></el-input
                  ><el-button>-</el-button>
                </div>
              </el-form-item>
              <el-button icon="el-icon-plus" style="width: 100%"></el-button>
            </el-form-item>
          </el-form>
        </template>
      </basicSituation>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import basicSituation from "@/components/PopupWindow/basicSituation.vue";
export default {
  components: {
    basicSituation,
  },
  data() {
    return {
      dialogVisible: false,
      url: "https://sdevenfangyi.oss-cn-shanghai.aliyuncs.com/cms/contract/1729581921716-527150619.pdf",
      pageNum: 1,
      pageTotalNum: 1,
      loadedRatio: 0,
      isHovered: false,
      document: {
        title:
          "文件名称文件名称文件文件名称文件名称文件名称文件文件名称文件名称文件名称文件名称名称名称文件文件名称文件名称文件名称文件名称名称",
      },
      formList: [
        {
          label: "合同名称",
          prop: "name",
          type: "el-input",
          rules: [{ required: true, message: "项目名称", trigger: "blur" }],
          components: {
            placeholder: "请输入",
            clearable: true,
            style: {
              width: "125%",
            },
          },
        },
        {
          label: "项目是否结束",
          prop: "state",
          type: "el-select",
          rules: [{ required: true, message: "项目名称", trigger: "blur" }],
          components: {
            disabled: false,
            placeholder: "请选择",
            clearable: true,
            style: {
              width: "125%",
            },
            option: {
              key: "value",
              label: "label",
              value: "value",
              list: [
                { label: "已结束", value: 1 },
                { label: "进行中", value: 0 },
              ],
            },
          },
        },
        {
          label: "项目名称",
          prop: "stop",
          type: "el-input",
          rules: [{ required: true, message: "项目名称", trigger: "blur" }],
          components: {
            placeholder: "请输入",
            disabled: false,
            clearable: true,
            style: {
              width: "125%",
            },
          },
        },
      ],
      form: {},
      formRef: "pdfForm",
    };
  },
  methods: {
    prePage() {
      if (this.pageNum > 1) {
        this.pageNum--;
      }
    },
    nextPage() {
      if (this.pageNum < this.pageTotalNum) {
        this.pageNum++;
      }
    },
  },
};
</script>

<style scoped>
.pdf-container {
  width: 100%;
  height: 600px; /* 可以根据需要调整高度 */
  overflow-y: auto; /* 超出时显示滚动条 */
}
.imageView {
  width: 100%;
  height: 600px; /* 确保高度固定 */
  overflow-y: hidden; /* 隐藏溢出部分 */
  position: relative;
}
::v-deep .el-form-item__label {
  line-height: 20px;
}
::v-deep .el-form-item {
  margin-bottom: 18px;
}
::v-deep .demo-dynamic .el-form-item__label {
  text-align: left;
}
</style>
